<template>
    <div class="navContent">
        <div class="nav_box">
            <div class="menuitem_content" v-for="(item, index) in menuList" :key="index">
                <!-- 一级菜单 -->
                <div v-if="item.meta?.hiddle == 0" class="menuitem_box" :class="{ 'menuitem_boxed': item.meta?.checkcolor }"
                    @click="handleMenu(item, index)">
                    <div class="menuitem_box_left">
                        <img v-if="item.meta?.checkcolor == true" class="iconimg" :src="item.meta?.iconed" alt="" srcset="">
                        <img v-else class="iconimg" :src="item.meta?.icon" alt="" srcset="">
                        <div class="menuitem_box_title">
                            {{ item.meta.title }}
                        </div>
                    </div>
                    <i v-if="!item.meta?.checkcolor" class="el-icon-arrow-up righticon"></i>
                    <i v-else class="el-icon-arrow-down righticon" style="color: #4BA840;"></i>
                </div>

                <div v-if="item.children && item.meta.check" class="submenuitem_box">
                    <div  v-if="subitem.meta?.hiddle == 0" class="subitem_content" :class="{ 'subitem_contented': subitem.meta?.checkcolor }"
                        v-for="(subitem, subindex) in item.children" @click="handleSubitem(item, index, subitem, subindex)">
                        {{ subitem.meta.title }}
                    </div>
                </div>

            </div>

        </div>

    </div>
</template>
<script>
import { routes } from "@/router/staticRouter";
export default {
    data() {
        return {
            menuList: [],
            classList: [
                {
                    name: "classDetail",
                    path: "classDetail",
                    component: () => import("@/views/classManagement/classDetail.vue"),
                    meta: {
                        title: "精英班",
                        keepAlive: true, // 不需要缓存
                        checkcolor: false,
                        check: false,
                        hiddle: 0,
                    },
                },
                {
                    name: "classDetail",
                    path: "classDetail",
                    component: () => import("@/views/classManagement/classDetail.vue"),
                    meta: {
                        title: "L2-99",
                        keepAlive: true, // 不需要缓存
                        checkcolor: false,
                        check: false,
                        hiddle: 0,
                    },
                },
            ]
        }
    },
    created() {
        this.menuList = routes[0].children
        this.menuList[0].children = this.classList
        console.log("menuList", this.menuList)

    },
    mounted() {

    },
    methods: {
        //点击一级菜单
        handleMenu(item, index) {
            console.log("item=======>",item)
            this.$router.replace({ path:item.path }).catch(err=>{
                // console.log("err==>",err);
            })
            this.menuList.forEach((items, indexs) => {
                items.meta.checkcolor = index == indexs ? true : false
                items.meta.check = index == indexs && items.children ? true : false
                //点一级菜单时 把所有二级菜单的选中状态取消
                if (items.children) {
                    items.children.forEach((itemw, indexw) => {
                        itemw.meta.checkcolor = false
                        itemw.meta.check = false
                    })
                }
            })
        },
        //点击二级菜单
        handleSubitem(item, index, subitem, subindex) {
            console.log("item==>",item)
            let path = item.path+"/"+subitem.path;
            if(path.indexOf("//")!=-1){
                path = path.replace(/\/\//g, '/');
            }
            console.log("path.slice(-1)",path.slice(-1));
            if(path.slice(-1) == '/'){
                path = path.slice(0, -1);
            }
            console.log("subitem.path", path)
            this.$router.replace({ path:path }).catch(err=>{
                // console.log("err==>",err);
            })
            item.meta.checkcolor = false //取消一级菜单选中状态
            this.menuList[index].children.forEach((items, indexs) => {
                items.meta.checkcolor = subindex == indexs ? true : false
            })
        },
    }
}
</script>
<style scoped lang="scss">
.navContent {
    width: 230px;
    height: 92.5vh;
    background: #4BA840;

    .nav_box {
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;

        .menuitem_content {
            .menuitem_box {
                width: 210px;
                height: 44px;
                border-radius: 8px 8px 8px 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                padding: 12px 30px;
                box-sizing: border-box;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 44px;

                .menuitem_box_left {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .iconimg {
                    width: 20px;
                    height: 20px;
                }

                .menuitem_box_title {

                    margin-left: 4px;
                }

                .righticon {
                    color: #ffffff;
                    font-size: 10px;
                    height: 10px;
                }
            }

            .menuitem_boxed {
                background: #EAF9E8;
                color: #4BA840;
            }

            .submenuitem_box {
                .subitem_content {
                    width: 210px;
                    height: 44px;
                    border-radius: 8px 8px 8px 8px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    padding: 12px 30px;
                    box-sizing: border-box;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 44px;
                    padding-left: 53px;

                }

                .subitem_contented {
                    background: #EAF9E8;
                    color: #4BA840;
                }
            }
        }
    }
}
</style>